<template>
    <div class="account-security">
         <!-- 头部 -->
        <van-nav-bar
            title="账户与安全"           
            left-arrow
            @click-left="onClickLeft"
            placeholder
            fixed          
        />
        <main>
            <h3>账号</h3>
            <div class="account">
                <div class="specific-account" v-for="(item,index) in accountList" :key="index">
                    <div class="left">
                        <img :src="item.img" alt="">
                        <span>{{item.name}}</span>
                    </div>
                    <div class="right">
                        <span>未绑定</span>
                        <van-icon name="arrow" />
                    </div>
                </div>
            </div>
            <h3>安全</h3>
            <div class="security">
                <div class="left">
                    <img :src="password" alt="">
                    <span>修改密码</span>
                </div>
                <div class="right">
                    <span>未设置</span>
                    <van-icon name="arrow" />
                </div>
            </div>
        </main>
        
    </div>
</template>
<script>
import weixin from "../assets/image/微信.webp"
import QQ from "../assets/image/QQ.webp"
import weibo from "../assets/image/微博.webp"
import password from "../assets/image/icon-密码.webp"
export default {
    data(){
        return{
            
            password:password,
            // accountList:['微信','QQ','微博'],
            // accountImg:['weixin','QQ','weibo'],
            accountList:[
                {
                    name:'微信',
                    img:weixin
                },
                {
                    name:'QQ',
                    img:QQ
                },
                {
                    name:'微博',
                    img:weibo
                },
            ]
                
            
        }
    },
    methods: {
        onClickLeft(){
            this.$router.go(-1)
        }
    },
}
</script>
<style lang="stylus" >
.account-security
     display flex
     flex-direction column
     align-items center     
     .van-nav-bar .van-icon
        color #4e4e4e
        font-size 16px
     .van-nav-bar__title
        font-size 18px
        color #494949
        line-height 25px
    main 
        width 100%        
        background #f4f4f4
        position absolute
        left 0
        top 46px
        height 100%
        
        h3           
            font-size: 12px;
            font-family: PingFang-SC-Medium, PingFang-SC;
            font-weight: 500;
            color: #464646;
            line-height: 30px;
            margin-left 18px
            height 30px
        .account
            width 100%
            height 168px
            padding 0 18px
            background #ffffff
            .specific-account
                width 100%
                height 33.3%
                display flex
                justify-content space-between
                align-items center
                border-bottom 1px solid #f8f8f8
        .security
            width 100%
            height 56px
            padding 0 18px
            background #fff
            display flex
            justify-content space-between
            align-items center
        .left
            display flex
            align-items center
            img 
                width 22px
                height 22px
                margin-right 20px
            span                       
                font-size: 16px;
                font-family: PingFang-SC-Medium, PingFang-SC;
                font-weight: 500;
                color: #464646;
                line-height: 22px;
        .right
            display flex
            align-items center
            span                         
                font-size: 14px;
                font-family: PingFang-SC-Medium, PingFang-SC;
                font-weight: 500;
                color: #B0B0B0;
                line-height: 20px;
            .van-icon
                font-size 22px
                color #bebebe
</style>